import React, { Component } from 'react';
import Child from './components/Child';
import ConsumerChild from './components/ConsumerChild';
import { CommonContext } from './CommonContext';
const { Provider, Consumer } = CommonContext; //组件之间传值
export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'yzh',
    };
    new Promise(function(resolve, reject) {
      setTimeout(resolve, 1000);
    }).then(() => {
      this.setState({
        name: 'youmou',
      });
    });
    // setTimeout(()=>{
    //     this.setState({
    //         name: 'youmou'
    //     })
    // },1000)
  }
  componentWillMount() {
    // Promise.resolve().then(()=>{
    //     this.setState({
    //         name: 'youmou'
    //     })
    // })
  }
  // componentDidMount(){
  //     setTimeout(()=>{
  //         this.setState({
  //             name: 'yhhhh'
  //         })
  //     },2000)
  // }
  handleClick = () => {
    this.setState({
      name: 'xiaoyu',
    });
  };
  render() {
    console.log('hello youmou');
    return (
      <Provider value={this.state.name}>
        <div>{this.state.name}</div>
        <button onClick={this.handleClick}>hello</button>
        <div>
          <Consumer>{value => <Child value={value} />}</Consumer>
          <ConsumerChild />
        </div>
      </Provider>
    );
  }
}
